<template>
    <view class="content">
        <navView navTitle="请假申请" titleColor="#fff" :isBack="true"></navView>
        <view class="form-container">

            <!-- 请假类型 -->
            <view class="form-item">
                <text class="label">请假用户:</text>
                <uni-data-select style="width: 70%;" :clear="false" v-model="formData.staffid"
                    :localdata="userList"></uni-data-select>
            </view>

            <!-- 请假类型 -->
            <view class="form-item">
                <text class="label">请假类型:</text>
                <uni-data-select style="width: 70%;" :clear="false" v-model="formData.type"
                    :localdata="leaveTypes"></uni-data-select>
            </view>
            <!-- 是否积分抵扣 -->
            <view class="form-item">
                <text class="label">是否需要审批:</text>
                <uni-data-select style="width: 70%;" :clear="false" v-model=" formData.is_score"
                    :localdata="scoreTypes"></uni-data-select>
            </view>

            <!-- 请假时间 -->
            <view class="form-item">
                <text class="label">开始时间:</text>
                <uni-datetime-picker type="datetime" v-model="formData.start_time" @change="calculateHours" />
            </view>

            <view class="form-item">
                <text class="label">结束时间:</text>
                <uni-datetime-picker type="datetime" v-model="formData.end_time" @change="calculateHours" />
            </view>

            <!-- 自动计算时长 -->
            <view class="form-item">
                <text class="label">请假时长:</text>
                <input class="input" type="number" v-model="formData.hour" placeholder="自动计算" disabled />
                <text class="unit">小时</text>
            </view>

            <!-- 请假事由 -->
            <view class="form-item column">
                <text class="label">事由说明:</text>
                <textarea class="textarea" v-model="formData.remarks" placeholder="请输入详细事由" auto-height />
            </view>

            <!-- 附件上传 -->
            <!-- <view class="form-item column">
                <text class="label">证明材料:</text>
                <uni-file-picker v-model="formData.file_ids" fileMediatype="image" limit="5"
                    title="最多上传5个文件"></uni-file-picker>
            </view> -->

            <!-- 提交按钮 -->
            <button class="submit-btn" @click="handleSubmit">提交申请</button>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            formData: {
                staffid:0,
                type: "事假",
                is_score: 0, // 是否需要积分抵扣
                start_time: "",
                end_time: "",
                hour: 0,
                remarks: "",
                file_ids: []
            },
            scoreTypes: [
                { value: 0, text: "不需要" },
                { value: 1, text: "需要" }
            ],
            leaveTypes: [
                { value: "年假", text: "年假" },
                { value: "事假", text: "事假" },
                { value: "病假", text: "病假" },
                { value: "调休假", text: "调休假" },
                { value: "婚假", text: "婚假" },
                { value: "产假", text: "产假" },
                { value: "陪产假", text: "陪产假" },
                { value: "其他", text: "其他" }
            ],
            userList:[],
        };
    },
    onLoad(){
        this.getUserList();
    },
    methods: {
        calculateHours() {
            if (this.formData.start_time && this.formData.end_time) {
                const start = new Date(this.formData.start_time)
                const end = new Date(this.formData.end_time)

                // 新增工作日计算逻辑
                const workHoursPerDay = 8
                const workStartHour = 9
                const workEndHour = 17

                let workMinutes = 0
                let current = new Date(start)

                while (current < end) {
                    // 排除周末
                    if (current.getDay() !== 0 && current.getDay() !== 6) {
                        const dayStart = new Date(current)
                        dayStart.setHours(workStartHour, 0, 0, 0)

                        const dayEnd = new Date(current)
                        dayEnd.setHours(workEndHour, 0, 0, 0)

                        const startTime = current < dayStart ? dayStart : current
                        const endTime = end < dayEnd ? end : dayEnd

                        if (endTime > startTime) {
                            workMinutes += (endTime - startTime) / 1000 / 60
                        }
                    }
                    // 移至下一天
                    current.setDate(current.getDate() + 1)
                    current.setHours(workStartHour, 0, 0, 0)
                }

                // 转换为小时（保留1位小数）
                this.formData.hour = (workMinutes / 60).toFixed(1)
            }
        },
        getUserList(){
            this.$request('/addons/qingdong/staff/getAllStaffList', 'GET',).then(res => {
                if (res.code === 1) {                    
                    this.userList = res.data
                }
            })
        },
        handleSubmit() {
            this.$request('/addons/qingdong/attendance/leave', 'POST', {
                ...this.formData
            }).then(res => {
                if (res.code === 1) {
                    uni.showToast({ title: '提交成功' })
                    setTimeout(() => uni.navigateBack(), 1500)
                }
            })
        }
    }
}
</script>

<style scoped lang="scss">
.content {
    .form-container {
        background-color: #fff;
        border-radius: 16rpx;
        padding: 0 20rpx;
    }

    .form-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 20rpx 0;
        border-bottom: 1rpx solid #ccc;
    }

    .label {
        font-size: 32rpx;
        color: #333;
        width: 200rpx;
    }

    .radio-group {
        display: flex;
        flex-direction: column;
    }

    .radio-group label {
        margin-bottom: 10rpx;
    }

    .input {
        flex: 1;
        height: 80rpx;
        padding: 0 20rpx;
        font-size: 32rpx;
        border: none;
        text-align: right;
        border-radius: 10rpx;
    }

    .submit-btn {
        margin-top: 40rpx;
        width: 95%;
        background-color: #0081ff;
        color: white;
        height: 80rpx;
        line-height: 80rpx;
        text-align: center;
        border-radius: 50rpx;
        font-size: 32rpx;
        position: fixed;
        bottom: 30rpx;
    }

    ::v-deep .uni-select {
        border: none;
    }

    ::v-deep .uni-select__input-text {
        text-align: right;
        padding-right: 30rpx;
    }
}

.column {
    flex-direction: column !important;
    align-items: flex-start !important;

    .textarea {
        width: 100%;
        min-height: 200rpx;
        padding: 20rpx;
        margin-top: 20rpx;
        border: 1rpx solid #eee;
        border-radius: 8rpx;
    }

    .uni-file-picker {
        width: 100%;
        margin-top: 20rpx;
    }
}

.unit {
    margin-left: 20rpx;
    color: #666;
}

// 保持原有表单样式继承自contractForm.vue</style>